<template>
	<view class="friend">
		<view class="friend-wrap l-whitespace">
			<block v-for="(item, index) in listArr" :key="index">
				<view class="wpl-item van-hairline--bottom">
					<view class="wpl-item-name">
					   <view slot="icon" class="avatar">
						   <image class="img" src="../../static/touxiang.png"></image>
					   </view>
					   <view slot="title" class="name">
						   <view class="vName">{{item.tel}} <text class="btm" :style="{backgroundColor: vType[item.vtype].color}">{{vType[item.vtype].name}}</text></view>
						   <view class="vId">会员号：{{item.id}}</view>
						   <view class="vTime">{{item.time}}</view>
					   </view>
					</view>
					<view slot="right-icon" class="wpl-item-sum">
						<!-- <view class="iconfont icondianhua" @click="onCall(item.phone)"></view> -->
						<view>直系下属人数:{{item.count}}</view>
					</view>
				</view>
			</block>
		</view>
		<loadding-more :noData="false" :loadEnd="loadEnd"></loadding-more>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import LoaddingMore from '../../components/loadding-more.vue'
export default {
	components: {
		LoaddingMore
	},
	data() {
		return {
			loadEnd: true,
			uid: '',
			vType: [
				{
					name: '普通会员',
					color: '#aace36'
				},
				{
					name: '黄金会员',
					color: '#B8860B'
				},
				{
					name: '铂金会员',
					color: '#00ecfa'
				},
				{
					name: '砖石会员',
					color: '#9dabd5'
				}],
			listArr: []
		};
	},
	onLoad() {
		this.getAllConnections()
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	methods: {
		onCall (phone) {
			console.log(phone)
			uni.makePhoneCall({
				phoneNumber: phone
			})
		},
		getAllConnections () {
			this.$http.getAllConnections({uid: this.userInfo.id}).then(e => {
				if (e.data.msg === 'ok') {
					if (!e.data.data.totalNum) {
						this.loadEnd = true
						return
					}
					this.listArr = e.data.data.item
				}
				console.log(e)
			})
		}
	}
};
</script>

<style scoped lang="scss">
	image {
		width: 100%;
		height: 100%;
	}
.friend {
	&-wrap {
			margin: 20upx 0;
			background-color: #fff;
			&-tetile {
			}
			.wpl-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20upx 0;
				&-name {
					display: flex;
					align-items: center;
					.name {
						.vName {
							font-size: 28upx;
							line-height: 1;
							display: flex;
							align-items: center;
							.btm {
								max-width: 90upx;
								max-height: 28upx;
								padding: 0 5upx;
								margin-left: 10upx;
								line-height: 1.4;
								font-size: 18upx;
								text-align: center;
								border-radius: 10%;
								color: #fff;
							}
						}
						.vId {
							font-size: 22upx;
							line-height: 1.8
						}
						.vTime {
							font-size: 20upx;
							color: #9b9b9b;
						}
					}
					.avatar {
						width: 90upx;
						height: 90upx;
						margin-right: 15upx;
						border-radius: 100%;
						overflow: hidden;
					}
				}
				.icondianhua {
					width: 60upx;
					height: 60upx;
					line-height: 60upx;
					text-align: right;
					font-size: 36upx;
				}
			}
			
		}
	
}
</style>
